<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">轮播图管理</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a th:href="@{admin}">首页</a></li>
                    <li class="breadcrumb-item active">网站管理</li>
                    <li class="breadcrumb-item active">轮播图管理</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
    <div class="card card-info">
        <form id="searchForm" class="needs-validation form-inline" novalidate="">
            <div class="form-group">
                <label for="sortNumber">排序号:</label>
                <input type="number" class="form-control m-2" id="sortNumber">
            </div>
            <div class="form-group">
                <label for="status">状态:</label>
                <select id="status" class="form-control" name="status">
                    <option value="">请选择</option>
                    <option value="0">禁用</option>
                    <option value="1">启用</option>
                </select>
            </div>
            <div class="form-group">
                <button class="btn btn-primary ml-3" type="submit">查询</button>
                <button class="btn btn-default ml-2" type="reset">重置</button>
            </div>
        </form>
    </div>
    <div class="card card-body">
        <div id="toolbar" class="btn-group">
            <shiro:hasPermission name="rotationimg:add">
            <button id="btn_add" type="button" class="btn btn-primary">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            </shiro:hasPermission>
        </div>
        <table class="table-sm" id="table"></table>
    </div>
</section>

<script>

    var deleteFlag = "[[${@perms.hasPerm('rotationimg:del')}]]";

    $(function () {

        window.operateEvents = {
            // 点击启用
            'click .btn_del': function (e, value, row, index) {
                enableRow(row.id)
            },
            // 点击禁用
            'click .btn_enable': function (e, value, row, index) {
                deleteRow(row.id)
            }
        }
        var columns = [
            {checkbox: true},
            {
                field: 'rotationImage',
                title: '轮播图',
                align: "center",
                class: "link-pre",
                formatter: function (value, row, index) {
                    return '<img src="' + value + '" style="width: 100px" onclick="previewImg(\'' + value + '\')"/>'
                }
            }, {
                field: 'sortNumber',
                title: '排序号',
                align: "center",
            }, {
                field: 'rotationInterval',
                title: '轮播间隔',
                align: "center",
            }, {
                field: 'username',
                title: '创建人',
                align: "center",
            }, {
                field: 'createTime',
                title: '创建时间',
                align: "center",
            }, {
                field: 'status',
                title: '状态',
                align: "center",
                formatter: function (value, row, index) {
                    return row.status == 1 ? "启用" : "禁用";
                }
            },
            {
                field: 'operation',
                title: '操作',
                align: "center",
                width: 150,
                events: operateEvents,
                formatter: operationFormatter
            }];

        function operationFormatter(value, row, index) {
            var del = deleteFlag ? (row.status == 0 ? '<button class="btn btn-info btn-sm ml-1 btn_del">启用</button>'
                : '<button class="btn btn-danger btn-sm ml-1 btn_enable">禁用</button>') : '';
            return del;
        }

        var options = {
            id: "#table",
            url: '/rotationimg/list',
            columns: columns,
            toolbar: '#toolbar',
            showRefresh: true,
            queryParams: queryParams
        }
        Core.initTable(options);

        function refreshTable() {
            Core.refreshTable("#table")
        }

        // 查询参数
        function queryParams(params) {
            return {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                sortNumber: $("#sortNumber").val(),
                status: $("#status").val(),
            };
        }

        // 查询
        $('#searchForm').submit(function (event) {
            event.preventDefault();
            event.stopPropagation();
            refreshTable();
        })

        // 新增
        $('#btn_add').on('click', function () {
            window.location.href = "#rotationimg/add"
        })

        function deleteRow(id) {
            Core.confirm("确定禁用该轮播图吗？", function () {
                Core.postAjax("/rotationimg/update", {"id": id, 'status': 0}, function (data) {
                    if (data.status === 200) {
                        refreshTable();
                    }
                    layer.msg(data.msg);
                })
            })
        }

        function enableRow(id) {
            Core.confirm("确定启用该轮播图吗？", function () {
                Core.postAjax("/rotationimg/update", {"id": id, 'status': 1}, function (data) {
                    if (data.status === 200) {
                        refreshTable();
                    }
                    layer.msg(data.msg);
                })
            })
        }


    });


    function previewImg(src) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '45%',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="width: 100%" alt="link" src="' + src + '">'
        });
    }
</script>